<template>
    <div class="countReport">
        <el-tabs v-model="activeName">
            <el-tab-pane label="计数报表" name="count">
                <count v-if="activeName == 'count'"></count>
            </el-tab-pane>
            <el-tab-pane label="小时计数报表" name="hoursCount">
                <hours-count v-if="activeName == 'hoursCount'"></hours-count>
            </el-tab-pane>
            <el-tab-pane label="计数明细" name="countDetail">
                <count-detail v-if="activeName == 'countDetail'"></count-detail>
            </el-tab-pane>
        </el-tabs>
    </div>
</template>

<script>
    import count from './count'
    import hoursCount from './hoursCount'
    import countDetail from './countDetail'
    export default {
        data(){
            return {
                activeName:'count'
            }
        },
        components:{
            count,
            hoursCount,
            countDetail
        }
    }
</script>

<style lang="less" scoped>
    .countReport{
        padding: 20px;
        overflow-y: auto;

        /deep/ .el-tabs__item{
            font-size: 16px;
            font-weight: 650;
        }
    }
</style>